// packageProduct/pages/detail/chart/chart.js
import * as echarts from '../../../components/ec-canvas/echarts';
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        customStyle: { //自定义样式
            type: String,
            value: ""
        },
        list: { //列表数据
            type: Array,
            value: []
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true
        }
    },

    observers: {
        list: function (val) {
            if (val && val.length > 0) {
                const ecComponent = this.selectComponent('#mychart-dom-bar');
                let data1 = [], data2 = [], data3 = []
                for (let i = 0; i < val.length; i ++) {
                    data1.push(val[i].n_added_nav);
                    data2.push(val[i].n_added_nav);
                    data3.push(val[i].t_date.split(" ")[0]);
                }
                let min = Math.min.apply(null, data1);
                let max = Math.max.apply(null, data1);
                let getNew = function (number, type) {
                    let newNum = number.toString();
                    if (type === "min") {
                        newNum = (newNum).toString().split(".");
                        newNum = newNum[0] + "." + (newNum[1] ? newNum[1].substr(0, 1): 0);
                    } else {
                        newNum = (newNum - 0 + 0.1).toString().split(".");
                        newNum = newNum[0] + "." + (newNum[1] ? newNum[1].substr(0, 1): 0);
                    }
                    return newNum
                };
                min = getNew(min, "min");
                max = getNew(max, "max");
                getNew = null;
                let option = {
                    title: {
                        text: "净值走势",
                        subtext: "双指操作进行缩放",
                        left: "center",
                        align: "right",
                        top: 10,
                        textStyle: {
                            fontSize: 16
                        }
                    },
                    legend: {
                        bottom: 5,
                        data:[{name: "累计净值"}]
                    },
                    grid: {
                        top: 70,
                        left: 50,
                        bottom: 70
                    },
                    xAxis : [{
                        type: "category",
                        boundaryGap: true,
                        data: data3,
                        // data: data3.map(function (str) {
                        //     let arr = str.split("-");
                        //     return arr[0] + "\n" + (arr[1] + "-" + arr[2])
                        // }),
                        axisLine: {
                            show: false,
                            color: "#f5f5f5"
                        },
                        axisLabel: {
                            show: true,
                            color: "#999"
                        },
                    }],
                    yAxis: [{
                        type: "value",
                        min: min,
                        max: max,
                        data: data1,
                        axisLine: {
                            show: false,
                            color: "#f5f5f5"
                        },
                        axisLabel: {
                            show: true,
                            color: "#999"
                        },
                    }],
                    dataZoom: [{
                        type: "inside",
                        show: true,
                        realtime: true
                    }],
                    tooltip : {
                        position: {right: 10, top: 10},
                        trigger: "axis",
                        formatter: function(params) {
                            return params[0].name.replace("\n", "-") + "\n"
                                + params[0].seriesName + " : " + params[0].value;
                        }
                    },
                    series: [{
                        name: "累计净值",
                        type: "line",
                        hoverAnimation: false,
                        data: data1
                    }],
                    color: ["#b22e2a"]

                };
                ecComponent.init((canvas, width, height, dpr) => {
                    // 获取组件的 canvas、width、height 后的回调函数
                    // 在这里初始化图表
                    const chart = echarts.init(canvas, null, {
                        width: width,
                        height: height,
                        devicePixelRatio: dpr // new
                    });
                    chart.setOption(option);
                    // 注意这里一定要返回 chart 实例，否则会影响事件处理等
                    return chart;
                });
            }
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})
